<template>
  <div class="markdown-content" v-html="renderedContent" />
</template>

<script setup>
import { marked } from 'marked'
import { computed } from 'vue'
import DOMPurify from 'dompurify' // 安全过滤

const props = defineProps({
  content: {
    type: String,
    required: true
  }
})

const renderedContent = computed(() => {
  return DOMPurify.sanitize(marked(props.content))
})
</script>

<style scoped>
.markdown-content :deep(h1) {
  font-size: 1.2em;
  margin: 0.5em 0;
}
.markdown-content :deep(a) {
  color: #409eff;
  text-decoration: none;
}
</style>